<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action
      :on-change="handleChange"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="false"
      :limit="1"
      accept=".img"
    >
      <el-button slot="trigger" size="small" type="primary" @click="isUpLoadDisable=false">1.选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        :disabled="isUpLoadDisable"
      >2.上传文件
      </el-button>
    </el-upload>


  </div>
</template>

<script>
import axios from "axios";
import SparkMD5 from "spark-md5";
import {config} from "process";

export default {
  props: {
    config: {
      type: Object,
      default: {},
    },
  },
  name: "MvCloudgateTerminalUpload",

  data() {
    return {
      dialogVisible:false,
      isUpLoadDisable: true,
      fileList: [],
      file: null,
      md5: null,
    };
  },

  mounted() {
    // console.log(this.config);
    // console.log(this.fileList)
    // if (this.fileList.length == 0) {
    //   console.log('epy')
    // }
  },

  methods: {
    submitUpload() {
      // console.log(this.fileList);
      this.file = this.fileList[0];
      if (!this.file) this.$message.error("请先上传升级包");
      this.uploadSlice(this.file);
      this.dialogVisible = true
    },
    uploadSlice(file) {
      this.$emit("handleUpload", [file, this.md5]);
      // return false;
      // // 创建切片
      // let size = 1024 * 1024 * 10; //10MB 切片大小
      // // let size = 1024 * 50; //50KB 切片大小
      // let fileChunks = [];
      // let index = 0; //切片序号
      // for (let cur = 0; cur < file.size; cur += size) {
      //   fileChunks.push({
      //     hash: index++,
      //     chunk: file.raw.slice(cur, cur + size),
      //   });
      // }
      // // 上传切片
      // const uploadList = fileChunks.map((item, index) => {
      //   console.log(item);
      //   let formData = new FormData();
      //   // formData.append("filename", this.file.name);
      //   // formData.append("hash", item.hash);
      //   formData.append("file", item.chunk);

      //   return axios({
      //     method: "post",
      //     url: `${process.env.VUE_APP_BASE_URL}${process.env.VUE_APP_BASE_API}${this.config.uploadUrl}${item.hash}`,
      //     headers: {
      //       "Content-Type": "text/plain",
      //     },
      //     data: item.chunk,
      //   });
      // });
      // await Promise.all(uploadList);
      // // 合并切片
      // await axios({
      //   method: "post",
      //   url: `${process.env.VUE_APP_BASE_URL}${process.env.VUE_APP_BASE_API}${this.config.mergeUrl}${fileChunks.length}`,
      // });
      // console.log("上传完成");

      // const res = await axios({
      //   method: "post",
      //   url: `${process.env.VUE_APP_BASE_URL}${process.env.VUE_APP_BASE_API}${this.config.checkUrl}${this.md5}`,
      // });
    },
    handleRemove(file, fileList) {
      this.fileList.length = 0;
      this.md5 = null;
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleChange(file, fileList) {
      if(file.name.indexOf('img')==-1) {
        this.$message.error("请上传后缀为.img的包！")
        setTimeout(()=>{
          this.fileList = []
        },500)
        return false
      }
      let date = new Date().getTime();
      var fileReader = new FileReader();
      var spark = new SparkMD5.ArrayBuffer();
      // 获取文件二进制数据
      fileReader.readAsArrayBuffer(event.target.files[0]);
      fileReader.onload = (e) => {
        // console.log("获取ArrayBuffer", e);
        spark.append(e.target.result);
        var md5 = spark.end();
        // console.log("转换成md5", md5);
        console.log(md5, (new Date().getTime() - date) / 1000);
        this.md5 = md5;
        // console.log(this.md5);
        this.fileList = fileList;

        this.$emit("init", this.config.type);
      };
      // console.log(md5(file.raw));
      // this.fileList = fileList;

      // this.$emit("init", this.config.type);
    },
  },
};
</script>

<style lang="scss" scoped></style>
